<script setup>
import { ref, watch } from 'vue'
const count = ref(0)
const nickname = ref('张三')

const changeCount = () => {
    count.value++
}
const changeNickname = () => {
    nickname.value = '李四'
}

// 1. 监视单个数据的变化
// watch(count, (newValue, oldValue) => {
//     console.log('count变化了', newValue, oldValue)
// })

// 2. 监视多个数据的变化
// watch([count, nickname], (newArr, oldArr) => {
//     console.log(newArr, oldArr)
// })

// 3. immediate 立即执行
// watch(count, (newValue, oldValue) => {
//     console.log('count变化了', newValue, oldValue)
// }, { immediate: true })

// 4. deep 深度监视
const userInfo = ref({
    name: '张三',
    age: 18,
})
const changeUserInfo = () => {
    userInfo.value.age++
}
// watch(userInfo, (newUserInfo) => {
//     console.log(newUserInfo)
// }, { deep: true })

// 5. 监视对象中的某个属性
watch(() => userInfo.value.age, (newValue) => {
    console.log(newValue)
})
</script>

<template>
    <div>{{ count }}</div>
    <button @click="changeCount">改数字</button>
    <div>{{ nickname }}</div>
    <button @click="changeNickname">改昵称</button>
    <div>-------------------------------</div>
    <div>{{ userInfo }}</div>
    <button @click="changeUserInfo">修改userInfo</button>
</template>